<template>
  <div id="state" style="width:100%;height:100%;"></div>
</template>

<script>
import {getevent} from 'config/api';
export default {
  data () {
    return {
      //  事件状态统计
      state_obj: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总数', '完成数', '处理中']  //  标识
        },
        grid: {
          top: '12%',
          left: '6%',
          right: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['A事件', 'B事件']
        },
        series: [{
          name: '总数',
          type: 'bar',
          data: [0, 0],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        },
        {
          name: '完成数',
          type: 'bar',
          data: [0, 0],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        },
        {
          name: '处理中',
          type: 'bar',
          data: [0, 0],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        }]
      }
    };
  },
  mounted () {
    this.state();  //  事件状态
  },
  methods: {
    //  事件状态
    state () {
      getevent().then((res) => {
        let datas = res.data.data;
        //  如果接收到的数据为空，默认赋值为0
        if (datas.length !== 0) {
          for (let key in datas) {
            let element = datas[key];
            this.state_obj.yAxis.data.push(element.type);
            this.state_obj.series[0].data.push(element.totalCnt);
            this.state_obj.series[1].data.push(element.processedCnt);
            this.state_obj.series[2].data.push(element.inprogressCnt);
          }
        }
        let myChart = echarts.init(document.getElementById("state"), 'dark'); //  获取Canvas
        myChart.setOption(this.state_obj); //  插入数据
        window.addEventListener('resize', function () { myChart.resize(); });
      });
      let myChart = echarts.init(document.getElementById("state"), 'dark'); //  获取Canvas
      myChart.setOption(this.state_obj); //  插入数据
      window.addEventListener('resize', function () { myChart.resize(); });
    }
  }
};
</script>